<template>
  <div>
    <el-card body-style="padding: 0">
      <el-form
        ref="globalLogQueryForm"
        :model="globalLogQueryForm"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="请求url" prop="url">
              <el-input
                v-model="globalLogQueryForm.url"
                placeholder="请输入请求url"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="请求用户" prop="username">
              <el-input
                v-model="globalLogQueryForm.username"
                placeholder="请输入请求用户"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="请求Ip地址" prop="address">
              <el-input
                v-model="globalLogQueryForm.address"
                placeholder="请输入请求Ip地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="创建时间" prop="timeRange">
              <el-date-picker
                v-model="globalLogQueryForm.timeRange"
                type="daterange"
                value-format="yyyy-MM-dd hh:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="submitQueryForm()"
                icon="el-icon-search"
              >
                查询</el-button
              >
              <el-button
                type="primary"
                size="small"
                plain
                @click="resetQueryForm()"
                icon="el-icon-refresh"
              >
                重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <el-table
        :data="tableData"
        border
        default-expand-all
        stripe
        style="width: 100%; margin-bottom: 20px"
      >
        <el-table-column
          prop="url"
          label="请求url"
          width="200"
          align="center"
        />
        <el-table-column
          prop="method"
          label="请求method"
          width="100"
          align="center"
        />
        <el-table-column
          prop="username"
          label="请求用户"
          width="200"
          align="center"
        />
        <el-table-column
          prop="address"
          label="请求Ip地址"
          width=""
          align="center"
        />
        <el-table-column
          prop="status"
          label="响应状态"
          width="100"
          align="center"
        />
        <el-table-column
          prop="costTime"
          label="请求响应时间"
          width="150"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="请求时间"
          width="300"
          align="center"
        />
      </el-table>
      <el-pagination
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
        background
        style="float: right; margin-bottom: 10px"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getGlobalLog } from "../../api/system/globallog";
import axios from "axios";
import MixinCUD from "@/components/MixinCUD";

export default {
  name: "GlobalLog",
  mixins: [MixinCUD],
  data() {
    return {
      tableData: [],
      queryFormRefName: "globalLogQueryForm",
      globalLogQueryForm: {
        url: "",
        username: "",
        address: "",
        timeRange: ["", ""],
      },
      pagination: {
        pageNum: 1,
        pageSize: 20,
        total: null,
      },
    };
  },
  methods: {
    getData() {
      getGlobalLog(this.globalLogQueryForm, this.pagination).then((res) => {
        this.setData(res);
      });
    },
    setData(pageinfo) {
      if (pageinfo.isok) {
        this.tableData = pageinfo.data.records;
        this.pagination.pageSize = pageinfo.data.size;
        this.pagination.total = pageinfo.data.total;
      }
    },
    handlePageSizeChange(val) {
      this.pagination.pageSize = val;
      this.submitQueryForm();
    },
    handlePageNumChange(val) {
      this.pagination.pageNum = val;
      this.submitQueryForm();
    },
  },
  beforeRouteEnter(to, from, next) {
    axios
      .all([
        getGlobalLog(
          { url: "", username: "", address: "", timeRange: ["", ""] },
          { pageNum: 1, pageSize: 20 }
        ),
      ])
      .then(
        axios.spread(function(res1) {
          next((vm) => {
            vm.setData(res1);
          });
        })
      );
  },
};
</script>

<style scoped>
.db-document-frame {
  margin-top: 40px;
  background-color: transparent;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}
.el-form {
  margin-top: 20px;
}
</style>
